<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>全部设备</span>
          </div>
          <div class="body">
            <p class="top-title">{{dataOption.device}}</p>
            <!--            <p class="top-desc-line">Warning times 80</p>-->
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>全部类目</span>
          </div>
          <div class="body">
            <p class="top-title">{{dataOption.category}}</p>
            <!--            <p class="top-desc-line">Warning times 80</p>-->
          </div>
        </el-card>
      </el-col>
      <!--      <el-col :xs="24" :sm="24" :md="12" :lg="6">-->
      <!--        <el-card class="update-log">-->
      <!--          <div slot="header" class="clearfix">-->
      <!--            <span>PRESSURE</span>-->
      <!--          </div>-->
      <!--          <div class="body">-->
      <!--            <p class="top-title">80%</p>-->
      <!--            <p class="top-desc-line">Warning times 80</p>-->
      <!--          </div>-->
      <!--        </el-card>-->
      <!--      </el-col>-->
      <!--      <el-col :xs="24" :sm="24" :md="12" :lg="6">-->
      <!--        <el-card class="update-log">-->
      <!--          <div slot="header" class="clearfix">-->
      <!--            <span>ONLINE RATE</span>-->
      <!--          </div>-->
      <!--          <div class="body">-->
      <!--            <p class="top-title">78%</p>-->
      <!--            <p class="top-desc-line">-->
      <!--              <span>Weekly 12%</span>-->
      <!--              <span>Dayly 24%</span>-->
      <!--            </p>-->
      <!--          </div>-->
      <!--        </el-card>-->
      <!--      </el-col>-->
    </el-row>
    <div class="page-menu">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <div class="page-menu-title">
            快捷入口
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="6" v-for="(item, index) in pageList" :key="index">
          <div class="page-menu-list" @click="routerPush(item)">
            <span>
              <i class="el-icon-menu"></i>
            </span>
            <p>{{ item.name }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--    <el-row :gutter="20">-->
    <!--      <el-col :sm="24" :lg="24">-->
    <!--        <div class="tab-box">-->
    <!--          <div class="tab-box-line">-->
    <!--            <span class="active">Discharge of water</span>-->
    <!--            <span>soil moisture</span>-->
    <!--          </div>-->
    <!--          <div class="tab-box-line-span">-->
    <!--            <span>Today</span>-->
    <!--            <span>Week</span>-->
    <!--            <span class="active">Mouth</span>-->
    <!--            <span>Year</span>-->
    <!--          </div>-->
    <!--          <div class="tab-box-line-span-time">-->
    <!--            <el-date-picker-->
    <!--              size="small"-->
    <!--              v-model="value1"-->
    <!--              type="daterange"-->
    <!--              range-separator="至"-->
    <!--              start-placeholder="开始日期"-->
    <!--              end-placeholder="结束日期">-->
    <!--            </el-date-picker>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--    <el-row :gutter="20">-->
    <!--      <el-col :sm="24" :lg="24">-->
    <!--        <div class="charts-box">-->
    <!--          <div class="charts-box-left">-->
    <!--            <div class="charts-box-header">-->
    <!--              Discharge of water-->
    <!--            </div>-->
    <!--            <div class="charts-box-body">-->
    <!--              <div id="chart7" style="width:100%;height: 250px" class="echartMap-line"></div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--          <div class="charts-box-right">-->
    <!--            <div class="charts-box-header">-->
    <!--              Ranking list-->
    <!--            </div>-->
    <!--            <div class="charts-box-body">-->
    <!--              <div class="charts-box-right-list" v-for="item in 5" :key="item">-->
    <!--                <span class="charts-box-right-list-index">{{ item }}</span>-->
    <!--                <div class="charts-box-right-list-content">-->
    <!--                  <span>Hardware id 001</span>-->
    <!--                  <span>80%</span>-->
    <!--                </div>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--    <el-row :gutter="20" style="margin-top: 20px;">-->
    <!--      <el-col :xs="24" :sm="24" :md="12" :lg="12">-->
    <!--        <el-card class="update-log">-->
    <!--          <div slot="header" class="clearfix">-->
    <!--            <span>Equipment Warning Times</span>-->
    <!--          </div>-->
    <!--          <div class="body">-->
    <!--            <div class="footer-box">-->
    <!--              <div class="footer-box-list">-->
    <!--                <p class="footer-box-list-top">Today Times</p>-->
    <!--                <div class="footer-box-list-bottom">-->
    <!--                  <p class="footer-box-list-bottom-left">22560</p>-->
    <!--                  <p class="footer-box-list-bottom-right"><em>Yesterday</em><i>21300</i></p>-->
    <!--                </div>-->
    <!--              </div>-->
    <!--              <div class="footer-box-list">-->
    <!--                <p class="footer-box-list-top">Week Times</p>-->
    <!--                <div class="footer-box-list-bottom">-->
    <!--                  <p class="footer-box-list-bottom-left">22560</p>-->
    <!--                  <p class="footer-box-list-bottom-right"><em>Last Week</em><i>21300</i></p>-->
    <!--                </div>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--            <div class="line-progress">-->
    <!--              <div class="line-progress-list" v-for="item in 4" :key="item">-->
    <!--                <p class="line-progress-list-top">-->
    <!--                  <span>Hardwre id 001</span>-->
    <!--                  <span>8900</span>-->
    <!--                </p>-->
    <!--                <el-progress :percentage="50" :show-text="false" status="exception"></el-progress>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--      <el-col :xs="24" :sm="24" :md="12" :lg="12">-->
    <!--        <el-card class="update-log">-->
    <!--          <div slot="header" class="clearfix">-->
    <!--            <span>Proportion of warning types</span>-->
    <!--          </div>-->
    <!--          <div class="chart-body">-->
    <!--            <div class="pie-chart-body">-->
    <!--              <pie-chart/>-->
    <!--            </div>-->
    <!--            <div class="pie-chart-list">-->
    <!--              <div class="pie-chart-list-line" v-for="(item,index) in colorWord" :key="index">-->
    <!--                <i :style="{'backgroundColor':item.color}"></i>-->
    <!--                <p>{{ item.name }}</p>-->
    <!--                <span>38.9%</span>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
  </div>
</template>

<script>
import * as echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
const animationDuration = 500
import PieChart from "./dashboard/PieChart";
import {indexBoard} from '@/api/system/board'

export default {
  name: "Index",
  components: {
    PieChart
  },
  data() {
    return {
      // 版本号
      version: "3.6.2",
      value1: '',
      colorWord: [
        {
          color: '#ff4949',
          name: 'TEMPERATURE'
        },
        {
          color: '#ff4949',
          name: 'HUMIDITY'
        },
        {
          color: '#ff4949',
          name: 'PRESSURE'
        },
        {
          color: '#ff4949',
          name: 'DISCHOF WATER'
        },
        {
          color: '#ff4949',
          name: 'SOIL MOISTURE'
        },
        {
          color: '#ff4949',
          name: 'OTHERS'
        }
      ],
      pageList: [
        {
          name: '设备类别',
          link: '/deviceManage/deviceCate'
        },
        {
          name: '设备管理',
          link: '/deviceManage/deviceIndex'
        },
        {
          name: '规则管理',
          link: '/ruleManage/ruleIndex'
        },
        {
          name: '指令管理',
          link: '/ruleManage/commandIndex'
        },
      ],
      dataOption: {
        category: 0,
        device: 0
      }
    };
  },
  created() {
    this.getIndexData()
  },
  mounted() {
    // let that = this
    // this.$nextTick(function () {
    //   that.initChart()
    // })
  },
  methods: {
    getIndexData() {
      indexBoard().then(res => {
        console.log('res:', res)
        this.dataOption = res
      })
    },
    routerPush(item) {
      this.$router.push(item.link)
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('chart7'));
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: 'pageA',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [79, 52, 200, 334, 390, 330, 220, 80, 52, 200, 334, 390],
          animationDuration
        }]
      })
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  background: #eee;

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.tab-box {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10px;
  margin-top: 20px;
}

.tab-box-line {
  flex: 1;
}

.tab-box-line span {
  padding: 5px;
  margin-right: 10px;
  cursor: pointer;
}

.tab-box-line span.active {
  color: #00afff;
  border-bottom: 2px solid #00afff;
}

.tab-box-line-span {
  display: flex;
  align-items: center;
}

.tab-box-line-span span {
  display: block;
  padding: 10px;
  margin-right: 10px;
  background: #eee;
  cursor: pointer;
  border-radius: 5px;
}

.tab-box-line-span span.active {
  background: #00afff;
  color: #fff;
}

.tab-box-line-span-time {
  width: 350px;
}

.charts-box {
  display: flex;
  padding: 10px;
  background: #fff;
  border-radius: 5px;
  margin-top: 20px;
}

.charts-box-left {
  flex: 1;
}

.charts-box-header {
  font-size: 16px;
  margin-bottom: 10px;
}

.charts-box-right {
  width: 250px;
}

.charts-box-right-list {
  display: flex;
  align-items: center;
  padding: 5px 0;
}

.charts-box-right-list-index {
  padding: 0 10px;
}

.charts-box-right-list-content {
  display: flex;
  flex: 1;
  justify-content: space-between;
  padding: 0 10px;
  background: #f8f9fa;
  border-radius: 5px;
  height: 40px;
  line-height: 40px;
}

.footer-box {
  display: flex;
  align-items: center;
  margin-bottom: 45px;
}

.footer-box .footer-box-list:first-child {
  margin-right: 20px;
  border-radius: 5px;
}

.footer-box .footer-box-list {
  flex: 1;
  background: #f8f9fa;
  padding: 0 10px;
}

.footer-box-list-top {
  font-size: 12px;
  margin: 0;
}

.footer-box-list-bottom {
  display: flex;
}

.footer-box-list-bottom-left {
  font-size: 14px;
  flex: 1;
}

.footer-box-list-bottom-right em, .footer-box-list-bottom-right i {
  font-style: normal;
}

.footer-box-list-bottom-right em {
  margin-right: 5px;
}

.line-progress-list-top {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
}

.line-progress-list-top span:first-child {
  flex: 1;
}

.chart-body {
  display: flex;
}

.pie-chart-body {
  flex: 1
}

.pie-chart-list {
  width: 200px;
}

.pie-chart-list-line {
  background: #f8f9fa;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
}

.pie-chart-list-line i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 10px;
}

.pie-chart-list-line p {
  flex: 1;
  margin: 0;
}

.pie-chart-list-line span {
  display: block;
  width: 50px;
}

.top-title {
  font-size: 20px;
  color: #333;
  font-weight: 500;
  margin: 0 !important;
}

.top-desc-line {
  display: flex;
  color: #aaa;
}

.top-desc-line span {
  flex: 1;
}

.page-menu {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  margin-top: 20px;
}

.page-menu-title {
  padding: 20px 15px;
  border-bottom: 1px solid #e6ebf5;
  color: #303133;
}

.page-menu-list {
  display: flex;
  align-items: center;
  padding: 15px;
  cursor: pointer;
}

.page-menu-list span {
  background: #eee;
  border-radius: 5px;
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-right: 10px;
}

.page-menu-list span i {
  font-size: 16px;
  color: #999;
}

.page-menu-list p {
  flex: 1;
}

.page-menu-list p:hover {
  text-decoration: underline;
  color: #36a3f7;
}
</style>
